import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:nyh_motorcade_app/styles/colors.dart';
import 'package:nyh_motorcade_app/widgets/custom_app_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:nyh_motorcade_app/widgets/custom_text_field.dart';
import 'phone_login_controller.dart';

class PhoneLoginPage extends StatelessWidget {
  final controller = Get.put(PhoneLoginController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colours.white,
      resizeToAvoidBottomInset: false,
      appBar: CustomAppBar(context: context, title: "手机验证码登录"),
      body: Container(
        margin: EdgeInsets.only(left: 16.w, top: 111.w, right: 16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            buildPhoneWidget(),
            SizedBox(height: 17.w),
            buildVerifyCodeWidget(),
            SizedBox(height: 65.w),
            buildLoginWidget(),
          ],
        ),
      ),
    );
  }

  Widget buildPhoneWidget() {
    return Row(
      children: [
        Text(
          "+86",
          style: TextStyle(color: Colours.color_text_theme, fontSize: 16.sp),
        ),
        SizedBox(
          width: 7.w,
        ),
        Container(
          width: 1.w,
          height: 13.w,
          color: Colours.color_eaeaea,
        ),
        SizedBox(
          width: 8.w,
        ),
        Expanded(
          child: GetBuilder<PhoneLoginController>(
            builder: (controller) {
              return CustomTextField(
                "请输入手机号",
                focusNode: controller.phoneFocus,
                hintStyle: TextStyle(color: Colours.color_cfcfd5, fontSize: 16.sp),
                textStyle: TextStyle(color: Colours.color_text_theme, fontSize: 16.sp),
                fillColor: Colours.color_white,
                contentPadding: EdgeInsets.symmetric(vertical: 15.w),
                keyboardType: TextInputType.phone,
                inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
                buildClearSuffixIcon: true,
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colours.color_eaeaea),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(width: 1.w, color: Colours.theme),
                ),
                onChanged: (value) {
                  controller.setPhone(value);
                },
              );
            },
          ),
        ),
      ],
    );
  }

  Widget buildVerifyCodeWidget() {
    return CustomTextField(
      "请输入验证码",
      focusNode: controller.verityCodeFocus,
      hintStyle: TextStyle(color: Colours.color_cfcfd5, fontSize: 16.sp),
      textStyle: TextStyle(color: Colours.color_text_theme, fontSize: 16.sp),
      fillColor: Colours.color_white,
      contentPadding: EdgeInsets.symmetric(vertical: 15.w),
      keyboardType: TextInputType.number,
      inputFormatters: [LengthLimitingTextInputFormatter(6), FilteringTextInputFormatter.digitsOnly],
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colours.color_eaeaea),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(width: 1.w, color: Colours.theme),
      ),
      suffixIcon: GetBuilder<PhoneLoginController>(
        builder: (controller) {
          return controller.currentTime <= 0
              ? TextButton(
                  onPressed: () {
                    controller.getVerifyCode();
                  },
                  child: Text(
                    "获取验证码",
                    style: TextStyle(color: Colours.theme, fontSize: 12.sp),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colours.color_white),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.w),
                        side: BorderSide(width: 1.w, color: Colours.theme),
                      ),
                    ),
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    minimumSize: MaterialStateProperty.all(Size(95.w, 30.w)),
                    padding: MaterialStateProperty.all(EdgeInsets.all(0)),
                  ),
                )
              : Text(
                  "${60 - controller.currentTime}秒后重新发送",
                  style: TextStyle(color: Colours.color_6f7082, fontSize: 14.sp),
                );
        },
      ),
      onChanged: (value) {
        controller.setVerityCode(value);
      },
    );
  }

  Widget buildLoginWidget() {
    return GetBuilder<PhoneLoginController>(
      builder: (controller) {
        return TextButton(
          onPressed: () {
            controller.login();
          },
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith((states) {
              return (controller.phone.isNotEmpty && controller.verityCode.isNotEmpty) ? Colours.color_theme : Colours.color_ffd599;
            }),
            overlayColor: MaterialStateProperty.resolveWith((states) {
              return (controller.phone.isNotEmpty && controller.verityCode.isNotEmpty) ? Colours.color_theme_deep : Colours.color_ffd599;
            }),
            shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(28.w),
              ),
            ),
            minimumSize: MaterialStateProperty.all(Size(double.infinity, 48.w)),
          ),
          child: Text(
            "登录",
            style: TextStyle(color: Colours.color_white, fontSize: 16.sp),
          ),
        );
      },
    );
  }
}
